<template>
  <!--威胁事件-->
    <search-table
      :columns="listCol" 
      :data="retData.list"
      :total="retData.total"
      :page="queryParams.pageIndex"
      :size.sync="queryParams.pageSize"
      @change-page="getThreatEvent"
      @change-size="getTargetSize"
    >
      <template slot="select-group">
        <Select filterable
          v-model="queryParams.dstTeamId"
          placeholder="请选择团队"
          clearable
          transfer
          @on-change="getThreatEvent(1)"
        >
          <Option
            v-for="item in teamList"
            :value="item.id"
            :key="item.id"
            :title="item.name"
            >{{ item.name }}</Option
          >
        </Select>
        <!-- 系统一般不指定实验员 -->
        <!-- <Select filterable
          v-model="queryParams.member"
          placeholder="请选择实验员"
          filterable
          clearable
          transfer
          @on-change="getThreatEvent(1)"
        >
          <Option
            v-for="item in teamList"
            :value="item.id"
            :key="item.id"
            :title="item.name"
          >
            {{ item.name }}
          </Option>
        </Select> -->
        <Select filterable
          v-model="queryParams.protocol"
          placeholder="选择协议"
          clearable
          transfer
          filterable
          @on-change="getThreatEvent(1)"
        >
          <Option
            v-for="(item, index) in appProtocolsList"
            :value="item"
            :key="index"
            >{{ item == 'file_restore_info' ? '文件':item.toUpperCase() }}</Option
          >
        </Select>

        <Select filterable
          v-model="queryParams.level"
          placeholder="危险等级"
          clearable
          transfer
          @on-change="getThreatEvent(1)"
        >
          <Option :value="1">低危</Option>
          <Option :value="2">中危</Option>
          <Option :value="3">高危</Option>
          <Option :value="4">紧急</Option>
        </Select>
        <Input
          v-model.trim="queryParams.srcIp"
          placeholder="源IP"
          clearable
          @on-change="getThreatEvent(1)"
        ></Input>
        <Input
          v-model.trim="queryParams.dstIp"
          placeholder="目标IP"
          clearable
          @on-change="getThreatEvent(1)"
        ></Input>
        <Input
          v-model.trim="queryParams.name"
          placeholder="威胁名称"
          clearable
          @on-change="getThreatEvent(1)"
        ></Input>
      </template>
    <!-- <card-list slot="table" :columns="listCol" :data="retData.list"></card-list> -->
    <!-- <Table :columns="listCol" :data="retData.list"></Table> -->
  </div>
</search-table>
</template>
<script>
import $Moment from 'moment'
import {networkSecurity,appProtocols } from '@/api/integration3d';
import { downloadFile } from '@/api/compitionStatic';
import groupMixin from '@/mixin/groupMixin';
import SearchTable from '@/components/SearchTable/SearchTable';
import moment from 'moment'
import { debounce } from '@/libs/utils';
export default {
  name: 'threatEvent',
  props: ['sceneId', 'poll'],
  mixins: [groupMixin],
  data () {
    return {
      queryParams: {
        dstTeamId: '',
        // member: '',
        protocol: '',
        level: '',
        srcIp: '',
        dstIp: '',
        name: '',
        pageIndex: 1,
        pageSize: 10,
      },
      retData: {
        total: 0,
        list: []
      },

      listCol: [
        {
          title: '团队',
          key: 'groupName',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          placement: 'top-left',
          order: 1,
          minWidth: 130,
          filter:(name,data) => data.srcTeamName || data.dstTeamName,
        },
        {
          title: '实验员',
          key: 'creatorName',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 110,
          filter:(name,data) => data.srcUserName || data.dstUserName,
        },
        {
          title: '发现时间',
          key: 'startTime',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth:140,
          filter:(startTime) => $Moment(startTime).format("YYYY-MM-DD HH:mm:ss")
        },
        {
          title: '源IP',
          key: 'srcIp',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth:100,
        },
        {
          title: '目的IP',
          key: 'dstIp',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 100
        },
        {
          title: '应用协议',
          key: 'protocol',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 100,
           render: (h,params) => {
            let protocol = params.row.protocol == 'file_restore_info' ? '文件' : params.row.protocol.toUpperCase()
            return h('span', protocol)
          }
        },
        {
          title: '威胁名称',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 100
        },
        {
          title: '威胁等级',
          key: 'level',
          minWidth: 100,
          align: 'center',
          tooltip: true,
          render: (h, params) => {
            let level = this.paserLevelStatus(params.row.level)
            return h('div', {
              style: {
                color: level.color
              }
            }, level.text)
          }
        },
        {
          title: '威胁IOC',
          key: 'ioc',
          minWidth: 100,
          align: 'center',
          tooltip: true
        },
        {
          title: '攻击结果',
          key: 'attackStatus',
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: '载荷',
          key: 'payload',
          align: 'center',
          tooltip: true,
          minWidth: 100
        },
      ],

      // 获取协议
      appProtocolsList:[]

    };
  },
  computed: {
    filterTeamList () {
      return this.teamList.filter((item) => item.name !== '目标方管理员组');
    }
  },
  components: {
    SearchTable
  },
  watch: {},
  created () { },
  beforeDestroy () {},
  async mounted () {
   await this.appProtocols()
   await this.getThreatEvent()
  },
  methods: {
    getTargetSize(val) {
      this.queryParams.pageSize = val
      this.getThreatEvent(1)
    },
    // 获取威胁事件列表数据
    getThreatEvent:debounce(function (val) {
      if (val) {
        this.queryParams.pageIndex = val
      }
       let projectId = this.$route.query.prjid
      // let projectId = 'Jf9bb58b53934df183b83878f74316e6'
      let params = {
        pageIndex: this.queryParams.pageIndex,
        pageSize: this.queryParams.pageSize,
        dstTeamId: this.queryParams.dstTeamId,
        protocol: this.queryParams.protocol,
        level: this.queryParams.level,
        srcIp: this.queryParams.srcIp,
        dstIp: this.queryParams.dstIp,
        name: this.queryParams.name,
      }
      networkSecurity(projectId, params).then(res => {
        if (res.code == 1) {
          this.retData.list = res.data.items
          this.retData.total = res.data.total
        } else {
          this.retData.list = []
          this.retData.total = 0
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },500),

    // 危险等级
    paserLevelStatus(val) {
      console.log('paserLevelStatus ~ val:', val)
      switch (val) {
        case 4:
          return { text: '紧急', color: '#a33114' }
        case 3:
          return { text: '高危', color: '#ed4014' }
        case 2:
          return { text: '中危', color: '#ff9900' }
        case 1:
          return { text: '低危', color: '#2db7f5' }
        default: return { text: '未定级', color: '' }
      }
    },

    appProtocols () {
      appProtocols().then(res => {
        if (res.code == 1) {
          console.log('==', res.data);
          this.appProtocolsList = res.data
        } else {
           this.appProtocolsList = []
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },


    downloadFile (file) {
      downloadFile(file.id)
        .then((data) => {
          if (!data.code) {
            const downloadElement = document.createElement('a');
            const href = window.URL.createObjectURL(data);
            downloadElement.href = href;
            downloadElement.download = file.name;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          } else {
            this.$Message.error(data.message);
          }
        })
        .catch((error) => {
          this.$Message.error('下载报告失败!');
        });
    }
  }
}
</script>

<style>
.drillsTable .ivu-poptip-body {
  text-align: left !important;
}
.scenesHeader {
  margin-bottom: 16px;
}
.drillTables {
  min-height: 300px;
}
.drillsTable.ivu-table-wrapper {
  overflow: inherit;
}
</style>
<style scoped>
.Titles {
  background: #eeeeee;
  margin: 16px auto;
  padding: 10px 0;
}
.targetHeader {
  padding: 10px;
  margin-bottom: 10px;
}
</style>
